<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-07-04 10:32:00
 * @LastEditors: sanghx
 * @LastEditTime: 2020-07-11 13:17:57
--> 
<template>
  <div class="container">
    <div class="terminal-box">
      <div class="header">
        <div class="dot red"></div>
        <div class="dot yellow"></div>
        <div class="dot green"></div>
      </div>
      <div class="panel">
        <div class="action">
          <div class="command">
            <span class="symbol">root@10.0.0.1:~$</span>
            <span class="white">Hi guys</span>
          </div>
          <div class="command">
            <span class="symbol">root@10.0.0.1:~$</span>
            <span class="white">This is the gitee visualization screen</span>
          </div>
          <div class="command">
            <span class="symbol">root@10.0.0.1:~$</span>
            <span class="white">Enter the user name of gitee and press enter key:</span>
            <input
              class="in"
              type="text"
              v-model="ruleForm.name"
              autofocus
              @keyup.enter="submitForm"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as gitee from '@/api/gitee'
export default {
  data() {
    return {
      ruleForm: {},
      tooltipShow: false
    }
  },
  mounted() {
    if (localStorage.getItem('user')) {
      this.$router.push({
        path: '/datav'
      })
    }
  },
  methods: {
    submitForm() {
      if (this.ruleForm.name) {
        gitee.user(this.ruleForm.name).then(res => {
          if (res.status === 200) {
            localStorage.setItem('user', JSON.stringify(res.data))
            this.$router.push({
              path: '/datav'
            })
          } else {
            this.$message({
              message: '请输入正确gitee的用户名哦!',
              type: 'warning'
            })
          }
        })
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped>
.container {
  position: absolute;
  width: 100vw;
  min-height: 100vh;
  background: #9b59b6;
}

.terminal-box {
  max-width: 800px;
  height: 38rem;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

h1 {
  color: #ecf0f1;
}

.header {
  background: linear-gradient(#f1f1f1, #d3d3d3);
  width: 100%;
  height: 1.875rem;
  border-radius: 10px 10px 0 0;
  position: relative;
  border-bottom: 2px solid;
  border-color: #9a9a9a;
}

.dot {
  position: absolute;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  display: inline-block;
}

.white {
  color: #ffffff;
}
.red {
  margin-left: 10px;
  background: #fc625d;
}

.yellow {
  margin-left: 30px;
  background: #fdbc40;
}

.green {
  margin-left: 50px;
  background: #33c748;
}

.panel {
  height: 70vh;
  background: #27292c;
  padding: 20px;
  overflow-y: scroll;
}

.action {
  margin-bottom: 10px;
}

.command {
  width: 100%;
  height: 20px;
  background: #27292c;
  color: #33c748;
  font-size: 16px;
}

input[type='text'] {
  background: #27292c;
  border: none;
  outline: none;
  color: white;
  margin-left: 5px;
  font-size: 16px;
}

.output {
  color: white;
  font-weight: 300;
  margin-top: 5px;
  margin-left: 12px;
}
</style>
